import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Form, Button, Col, Row } from 'antd';
import FormCondition from '@/components/FormCondition';
import DrawerCondition from '@/components/DrawerCondition';
import { notification } from 'antd';
import FormList from '../FormList';
const SetForm = (props) => {
  const {
    dispatch,
    visible = {},
    onClose,
    handleCallback,
    loading,
  } = props;

  const { show = false, detail = {}, type = 'edit' } = visible;
  const { id } = detail;
  const [form] = Form.useForm();
  const [list, setList] = useState([''])
  useEffect(() => {
    if (!show) {
      setList([''])
    }
  }, [show])
  const handleList = ({ index, type = 'edit', value, }) => {
    if (type === 'edit') {
      setList(list.map((item, o) => {
        if (index === o) {
          return value
        }
        return item
      }))
    }
    else if (type === 'remove') {
      setList(list.filter((item, o) => {
        if (index !== o) {
          return true
        }
        return false
      }))
    } else if (type === 'add') {
      setList([...list, ''])
    }
    if (type === 'all') {
      setList([...list.filter(item => {
        if (item) {
          return true
        }
        else {
          return false
        }
      }), ...value
        .replace(/(\r\n)|\r|\n/g, '\n')
        .split(/\n+/g)
        .filter((item) => {
          if (item) {
            return true;
          } else {
            return false;
          }
        })])
    }
  }
  const fetchRoleEdit = () => {
    if (type === 'install') {
      const tagList = list.filter(item => {
        if (item) {
          return true
        }
        else {
          return false
        }
      }).map(item => {
        return item
      })
      if (tagList.length === 0) {
        notification.warning({
          message: '警告提示',
          description: '请输入完分组后提交',
        });
        return
      }
      else {
        dispatch({
          type: 'promoter/fakeSavePromoterGroup',
          payload: {
            groupNameList: tagList
          },
          callback: () => {
            onClose();
            handleCallback();
          },
        });
      }

    }
    else {
      form.validateFields().then((values) => {
        dispatch({
          type: 'promoter/fakeEditPromoterGroup',
          payload: {
            id,
            ...values,
          },
          callback: () => {
            onClose();
            handleCallback();
          },
        });
      });
    }

  };

  const formItems = [
    {
      label: '分组名称',
      name: 'groupName',
      visible: type === 'edit',
    },

    {
      type: 'noForm',
      visible: type === 'install',
      rules: [{ required: false }],
      formItem: <FormList handleList={handleList} list={list}></FormList>,
    },
  ];

  const modalProps = {
    title: `${id ? '修改' : '新增'}`,
    visible: show,
    onClose,
    footer: (
      <Button type="primary" loading={loading} onClick={fetchRoleEdit}>
        确定
      </Button>
    ),
  };

  return (
    <DrawerCondition {...modalProps}>
      <FormCondition form={form} formItems={formItems} initialValues={detail}></FormCondition>
    </DrawerCondition>
  );
};

export default connect(({ behaviorEecord, loading }) => ({

  loading: loading.models.behaviorEecord,
}))(SetForm);
